<template>
  <div>
    <com-header></com-header>
    <a-layout-content class="container">
      <a-card style="margin: 20px 0; ">
        <div v-for="(value, key) of category_type_item"
             v-if="typeof value === 'object'">
          <a-tag @click="to_next_page(key, item)" style="margin-bottom: 4px;cursor: pointer"
                 v-for="(item, index) in value"
                 :key="item.tag"
                 :color="query[key] === item.tag ? 'green' : ''">{{ item.title }}
          </a-tag>
        </div>
      </a-card>
      <com-title title="全部筛选" style="margin: 10px 0"/>
      <a-row v-if="category_list.length" :gutter="[16,16]">
        <a-col v-for="cart in category_list"
               :key="cart.url"
               :xs="12" :sm="8" :md="8" :lg="6" :xl="4" :xxl="4" :span="4">
          <a-card hoverable
                  @click="to_page(cart)"
                  style="width: 100%;">
            <img slot="cover"
                 :src="cart.img" :to="`/desc-va?url=${cart.url}&title=${cart.title}`"
                 style="width: 100%; height: 153px;object-fit: cover" :alt="cart.desc">
            <a-card-meta style="height: 80px" :title="cart.title">
              <template slot="description">
                {{ cart.desc }}
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
      </a-row>
      <a-empty style="min-height: 350px" v-else/>
    </a-layout-content>

    <a-pagination style="display: block; margin: 20px auto;width: 600px;"
                  show-quick-jumper
                  :current="query.page * 1" :total="10000" @change="onPaginationChange"/>
    <com-footer></com-footer>
  </div>
</template>

<script>
import queryParams from "../util/queryParams";
import cardContent from "../components/cart-content";
import comUp from "../components/com-up";
import comTitle from "../components/com-title";

export default {
  name: "category-type",
  key(route) {
    return route.fullPath
  },
  components: {
    cardContent,
    comTitle,
  },
  head() {
    return {
      title: '视频筛选',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'My custom description'
        }
      ]
    }
  },
  watchQuery: true,

  async asyncData({query, $axios, app}) {
    let _query = Object.assign({}, {
      type: 'serial', // 页类别
      category: 'all', // 类别
      page_type: 'serial',  // 页类别
      rank: 'rankhot',
      year: 'all',
      area: 'all',
      act: 'all',
      page: '1',
    }, (query || {}));
    _query.category = _query.type;
    _query.type = _query.page_type; // 页面类别
    const category_list = await $axios.get(`parse360/category_list${queryParams(_query)}`);
    const category_type = await $axios.get(`parse360/category_type?category=${(query || {}).page_type || 'serial'}`);
    // console.log(category_list, queryParams(_query))
    return {
      category_type_item: ((category_type || {}).data || {}),
      category_list: ((category_list || {}).data || []),
      query: {
        type: query.type || 'all', // 类别
        page_type: query.page_type || 'serial',  // 页类别
        rank: query.rank || 'rankhot',
        act: query.act || 'all',
        year: query.year || 'all',
        area: query.area || 'all',
        page: query.page || '1',
      },
    }
  },

  methods: {
    to_page(query) {
      this.$router.push({
        path: '/desc-va',
        query: {
          url: query.url,
          title: query.title
        }
      })
    },

    onPaginationChange(current) {
      this.to_next_page('page', {tag: current})
    },

    to_next_page(key, query) {
      this.$router.push({
        path: '/category-type',
        query: {
          ...this.$route.query,
          [key]: query.tag,
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
